<template>
  <div>
    <!-- 分页器组件 -->

    <div class="pagerBox">
      <slot name="pagination"></slot>
      <!-- 使用方法 -->
      <!-- <el-pagination
      slot="pagination"
        background
        layout="prev, pager, next, jumper"
        :total="1000"
        :page-size='100'
        hide-on-single-page
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-sizes="[100, 200, 300, 400]"
        
      >
      </el-pagination> -->
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.pagerBox {
  width: 100%;
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-pagination,
  .is-background {
    width: 57%;
    height: 4rem;
    // background-color:#fff;
  }
}
</style>
<style>
.el-pagination.is-background .el-pager {
  margin: 0 auto;
  text-align: center;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: #100f1f;
  margin: 0 1.6rem;
  border: 0.1rem solid #2d325a;
  text-align: center;
  height: 3.8rem;
  width: 3.8rem;
  line-height: 3.8rem;
  font-size: 1.6rem;
}
/* .el-pagination.is-background .el-pager li:hover {
  color: #ff0000;
  border: .1rem solid #f2b9fe;
} */
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #191931;
  color: #ffffff;
  border: 0.1rem solid #f2b9fe;
}
.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  display: inline-block;
  height: 3.6rem;
  font-size: 1.8rem;
  line-height: 3.6rem;
}

.el-pagination__editor.el-input .el-input__inner {
  height: 3rem;
  border: 0.1rem solid #f2b9fe;
  position: relative;
  top: -0.2rem;
  font-size: 1.2rem;
  background-color: #0f0f1f;
}
/* .el-pagination__jump .el-input__inner {
  padding: 0;
}
.el-input--small .el-pagination__editor .is-in-pagination {
  height: 4rem;
} */
</style>